<template>
    <div class="growth_rules_container">
        <div class="top_card">
            <div class="top_card_name">成长规则</div>
        </div>
        <div class="form_card">
            <el-form ref="formRef" :model="form" :disabled="state.isDisabledForm">
                <div class="form_item_box">
                    <el-form-item label-width="0">
                        <el-checkbox
                            v-model="form.growthRuleSwitch"
                            :true-label="1"
                            :false-label="2"
                            @change="onCheckboxChange" />
                    </el-form-item>
                    <el-form-item label="每消费" prop="money" :rules="rules.required">
                        <el-input-number
                            class="input_width_90"
                            v-model="form.money"
                            :min="1"
                            :max="99999"
                            :precision="0"
                            :controls="false"
                            placeholder="请输入"
                            :disabled="form.growthRuleSwitch === 2" />
                    </el-form-item>
                    <el-form-item label="元，获得" prop="points" :rules="rules.required">
                        <el-input-number
                            class="input_width_90"
                            v-model="form.points"
                            :min="1"
                            :max="99999"
                            :precision="0"
                            :controls="false"
                            placeholder="请输入"
                            :disabled="form.growthRuleSwitch === 2" />
                    </el-form-item>
                    <el-form-item label="成长值"> </el-form-item>
                </div>
            </el-form>
            <div class="desc">订单确认收货后，立即发放成长值。按照订单商品金额计算成长值，不包含运费部分。</div>
        </div>
        <div class="btn_card" v-auth="'rank_growth_rules:edit'">
            <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { floatMultiply, floatDivide } from '@/commons/utils';
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';
import request from '@/request';
import { ElMessage } from 'element-plus';
import store from '@/store';

const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
const auth = reactive([permissions.has('rank_growth_rules:view'), permissions.has('rank_growth_rules:edit')]);

const state = reactive({
    isDisabledForm: false
});
const formRef = ref(null);
const form = reactive({
    growthRuleSwitch: 2,
    money: null,
    points: null
});
const rules = reactive({
    required: [{ required: true, message: '该字段必填', trigger: 'blur' }]
});
const getData = async () => {
    const { data } = await request('getDetailGrowthRules', { appType: 1 });
    Object.keys(form).forEach(key => (form[key] = data[key]));
    form.growthRuleSwitch = data.growthRuleSwitch || 2;
    form.money = data.money ? floatDivide(data.money, 100) : null;
    form.points = data.points || null;
};
const onCheckboxChange = v => {
    rules.required[0].required = v === 1;
    if (v === 2) {
        form.money = null;
        form.points = null;
    }
};
const onSubmit = async formEl => {
    if (!formEl.validate()) return;
    formEl.validate(async valid => {
        if (valid) {
            let parms = {
                growthRuleSwitch: form.growthRuleSwitch,
                money: form.money ? floatMultiply(form.money, 100) : 0,
                points: form.points || 0
            };
            const res = await request('saveGrowthRules', parms);
            ElMessage.success('保存成功');
        }
    });
};

onMounted(() => {
    if (auth[1]) {
        state.isDisabledForm = false;
    } else {
        state.isDisabledForm = true;
    }

    setLayout();
    getData();
});
onUnmounted(() => {
    resetLayout();
});
</script>

<style lang="scss" src="./index.scss" scoped></style>
